import React,{useEffect,useState} from 'react'
import Pagecomponent from './pageComponent/Pagecomponent';
import './Wear.css'

var pageNum;
const Wear = () => {

  const [dataList, setDataList] = useState([]);
  const [totalPage, setTotalPage] = useState(15);
    const [wear,setWear] = useState([]);
    const [wname, setWname] = useState('');
    const [wtext, setWtext] = useState('');

    useEffect(()=>{
        fetch(`https://api.124ss.xyz:2355/endwear?rand=$1`,{
          method: "GET",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          }
    
        }).then(res => {
          return res.json();
        })
        .then(res =>{
            var arr = [];
            var wearObj = [];
            res.forEach((item,index) => {
                wearObj = [
                    item['wear_id'],
                    item['wear_name'],
                    item['wear_image'],
                    item['wear_text']
                ]
                arr.push(wearObj)
            } )
            setWear(arr)
        })
        .catch((err)=>{
          console.log("err:",err);
        })
      },[]
    )

    const DelItem = (idx,item) => {
  
        fetch(`https://api.124ss.xyz:2355/enddelWear/${item[0]}`,{
          method: "delete",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          },
          body: JSON.stringify({
            wear_id: item[0]
          })
    
        }).then(res => {
          return res.text();
        })
        .then(res =>{
          console.log(res)
        } )
        .catch((err)=>{
          console.log("err:",err);
        })
    
        let newWear = wear.filter((_,index)=>idx!=index);
        setWear(newWear);
    
      }

      const AddWear = () => {
        fetch(`https://api.124ss.xyz:2355/addWear`,{
          method: "post",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          },
          body: JSON.stringify({
            wear_id: 22,
            wear_name: wname,
            wear_text: wtext
          })
    
        }).then(res => {
          return res.text();
        })
        .then(res =>{
          // alert('添加成功！')
        } )
        .catch((err)=>{
          // alert('添加失败')
          console.log("err:",err);
        })
      }

      const getCurrentPage = (currentPage) => {
        setDataList(wear[currentPage-1])
        pageNum = currentPage;
      }

    return (
        <div id='wear-container'>
          <div style={{backgroundColor:'white'}}>
            <input style={{width:'200px',height:'30px'}}
                  value = {wname}
                  onChange = {e => {setWname(e.target.value)}} 
                  placeholder = '穿搭'
            />
            <input style={{width:'200px',height:'30px'}}
                  value = {wtext}
                  onChange = {e => {setWtext(e.target.value)}} 
                  placeholder = '服装配饰'
            />
            <button onClick={() => AddWear()}>添加</button>
          </div>
          <div id='wear-table'>
            <table id='wear-tab'>
                <thead>
                    <tr>
                      <th>序号</th>
                      <th>穿搭</th>
                      <th>服装配饰</th>
                      <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                {
                    wear.slice(3*(pageNum-1),3*pageNum).map((item, index) =>
                    <tr key={index}>
                      {/* <td>
                        <img style={{width: 90, height: 90, borderRadius: 50}} src={'https://api.124ss.xyz:2355/images/' + item[2]} />
                      </td> */}
                      <td>
                        {(pageNum-1)*3+index+1}
                      </td>
                      <td>{item[1]}</td>
                      <td>{item[3]}</td>
                      <td>
                        <button id='wear-btn' onClick={() => DelItem(index,item)}>
                          删除
                        </button>
                      </td>
                    </tr>)
                }
                </tbody>
            </table>
          </div>

          <div id='eat-page'>
            <Pagecomponent totalPage={totalPage} pageCallbackFn={getCurrentPage}/>
          </div>
        </div>
    )
}

export default Wear
